<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="../layui/layui.js" charset="utf-8"></script>
</head>
<body>
<h2>汽组展示</h2>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 开启头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" placeholder="请输入汽组编号/标题" autocomplete="off">
        </div>
        <button class="layui-btn" lay-event="reload">搜索</button>
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="fanhui"><a href="houtai.html">返回</a></button>
    </div>
</script>

<div id="updatediv" style="display:none">
    <form class="layui-form" action="" lay-filter="formTest">
        <div class="layui-form-item">
            <label class="layui-form-label">汽组展示编号</label>
            <div class="layui-input-block">
                <input type="text" name="qizu_id" required  lay-verify="required" placeholder="请输入编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">汽组展示标题</label>
            <div class="layui-input-block">
                <input type="text" name="qizu_bt" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">汽组展示内容</label>
            <div class="layui-input-block">
                <input type="text" name="qizu_nr" required  lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input">
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
            <legend>常规使用：普通图片上传</legend>
        </fieldset>

        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1">
                <p id="demoText"></p>
            </div>
        </div>
        <input type="hidden" id="aa" name="qizu_img" class="layui-input"/>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use(['table','form','upload'], function(){
        var table = layui.table;//layui中使用html的table
        var $ = layui.$;//layui中使用jQuery
        var form = layui.form;
        var $ = layui.jquery
            ,upload = layui.upload;
        var depttab = table.render({//表格渲染
            elem: '#test'
            ,url:'/qizu/show'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [[//列  标题栏
                {checkbox: true, sort: true}
                ,{field:'qizu_id', title: '汽组展示编号', sort: true}
                ,{field:'qizu_bt', title: '汽车展示标题'}
                ,{field:'qizu_nr', title: '汽车展示地址', sort: true}
                ,{field:'qizu_img', title: '汽车展示图片',templet:'<div><img width="100px" height="200px" src="{{d.qizu_id}}"></div>'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page:true
            //表格加载完成之后可以对表格进行二次操作，渲染完回调
            ,done: function(res, curr, count){
                $("#demoReload").val(res.qizu_id);
            }
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/upload/'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                $("#aa").val(res.path);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });

        //监听头部工具栏事件
        table.on('toolbar(test)', function(obj){
            if(obj.event === 'add'){
                //在添加之前清空form表单中的数据
                form.val("formTest",{
                    "qizu_id":""
                    ,"qizu_bt":""
                    ,"qizu_nr":""
                    ,"qizu_img":""
                });
                var alayer = layer.open({
                    type: 1
                    ,anim: 2
                    ,content: $('#updatediv')
                });
                form.on('submit(formDemo)',function (data){
                    layer.close(alayer);
                    $.ajax({
                        url:"/qizu/add"
                        ,type:"post"
                        ,data:data.field
                        ,success:function(d){
                            if(d === 1){
                                layer.msg('添加成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    depttab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            qizu_id:null
                                        }
                                    });
                                });
                            }
                        }
                    });
                    return false;//阻止表单跳转
                });
            }else if(obj.event === 'reload'){
                depttab.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        qizu_id:$('#demoReload').val()
                    }
                });
            }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定要删除吗', function(){
                    $.ajax({
                        url:'/qizu/delete/'+data.qizu_id,
                        type:'delete',
                        success:function (d){
                            if(d === 1){
                                layer.msg('删除成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    depttab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            qizu_id:null
                                        }
                                    });
                                });
                            }
                        }
                    });

                });
            }else if(obj.event === 'edit'){
                var uplayer = layer.open({
                    type: 1
                    ,anim: 3
                    ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                //form自动赋值
                form.val("formTest",{
                    "qizu_id":data.qizu_id
                    ,"qizu_bt":data.qizu_bt
                    ,"qizu_nr":data.qizu_nr
                    ,"qizu_img":data.qizu_img
                });

                //提交
                form.on('submit(formDemo)',function (data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"/qizu/update"
                        ,type:"post"
                        ,data:data.field//所有数据字段
                        ,success:function(d){
                            if(d === 1){
                                layer.msg('修改成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    depttab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            qizu:null
                                        }
                                    });
                                });
                            }
                        }
                    });
                    return false;//阻止表单跳转
                });
            }
        });
    });
</script>
</body>
</html>